import Patch from './patch.mdx'

# Taro vite

## 安装

```bash npm2yarn
npm install -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss
```

> 这里不使用 `@tailwindcss/vite` 是由于 `taro` 配置没法加载纯 `esm` 不是 `cjs` 的包, 会爆错误 `No "exports" main defined`

<Patch />

## 配置

```js title="config/index.ts"
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import tailwindcss from '@tailwindcss/postcss'
import path from 'node:path'

{
  compiler: {
    type: 'vite',
    vitePlugins: [
      {
        name: 'postcss-config-loader-plugin',
        config(config) {
          // 加载 tailwindcss
          if (typeof config.css?.postcss === 'object') {
            config.css?.postcss.plugins?.unshift(tailwindcss())
          }
        },
      },
      UnifiedViteWeappTailwindcssPlugin({
        rem2rpx: true,
        cssEntries: [
          // 你 @import "weapp-tailwindcss"; 那个文件绝对路径
          path.resolve(__dirname, '../src/app.css'),
        ],
      }),
    ]
  },
}
```

> tailwindcss@4 必须配置 `cssEntries` 并且使用绝对路径，否则 `tailwindcss` 生成的类名不会参与转译。

> 这里使用 `vite` 插件直接去加载 `tailwindcss`，这是由于 `taro4 vite` 不会自动去加载项目下的 `postcss.config.js`，所以只能定义这个 `postcss-config-loader-plugin`

## 添加样式

在项目目录下的 `src/app.css` 中，添加以下内容：

```css title="src/app.css"
@import "weapp-tailwindcss";
```


更改好配置之后，直接运行启动项目，微信开发者工具导入这个项目，即可看到效果。

## 参考模板

https://github.com/icebreaker-template/taro-vite-tailwindcss-v4
